<template>
  <div class="app-container parent">
    <el-container>
      <!--      <el-header height="125px">-->
      <!--        <quote/>-->
      <!--      </el-header>-->

      <el-main >
        <div style="text-align: center">
          <el-menu :default-active="activeTab" class="el-menu-demo" mode="horizontal" style="position: absolute" @select="changeTab">
            <el-menu-item label="" index="almanac">
              万年历
            </el-menu-item>
            <el-menu-item label="百度热搜" index="baidu">
              百度热搜
            </el-menu-item>
            <el-menu-item label="微博热搜" index="weibo">
              微博热搜
            </el-menu-item>
            <el-menu-item label="知乎热搜" index="zhihu">
              知乎热搜
            </el-menu-item>
            <el-menu-item label="头条热搜" index="toutiao">
              头条热搜
            </el-menu-item>
            <el-menu-item label="腾讯热搜" index="tencent">
              腾讯热搜
            </el-menu-item>
            <el-menu-item label="BiliBili" index="bili">
              BiliBili
            </el-menu-item>
            <el-menu-item label="好看视频" index="haokan">
              好看视频
            </el-menu-item>
            <el-menu-item label="星座运势" index="astro">
              星座运势
            </el-menu-item>
          </el-menu>

          <astro v-if="activeTab == 'astro'"/>
          <haokan v-if="activeTab == 'haokan'"/>
          <bili v-if="activeTab == 'bili'"/>
          <tencent v-if="activeTab == 'tencent'"/>
          <toutiao v-if="activeTab == 'toutiao'"/>
          <zhihu v-if="activeTab == 'zhihu'"/>
          <weibo v-if="activeTab == 'weibo'"/>
          <almanac v-if="activeTab == 'almanac'"/>
          <baidu v-if="activeTab == 'baidu'"/>

        </div>
      </el-main>

    </el-container>
  </div>
</template>
<script>

import quote from './components/quote'
import baidu from './components/baidu'
import weibo from './components/weibo'
import bili from './components/bili'
import haokan from './components/haokan'
import zhihu from './components/zhihu'
import tencent from './components/tencent'
import toutiao from './components/toutiao'
import astro from './components/astro'
import almanac from './components/almanac'
import NewsCardView from "./components/NewsCardView";

export default {
  components: {
    tencent,
    haokan,
    bili,
    weibo,
    quote,
    baidu,
    zhihu,
    toutiao,
    astro,
    almanac,
    NewsCardView
  },
  data() {
    return {
      activeTab: 'baidu'
    }
  },
  created() {
    // this.init()
  },
  methods: {
    changeTab(index, path) {
      this.activeTab = index
    }
  }
}
</script>

<style scoped>
.el-header, .el-footer {
  background-color: #F1F1F1;
  color: #333;
}

.el-rate__icon{
  font-size: 20px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 55px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 55px;
}
.is-selected {
  color: #1989FA;
}
.el-calendar-table__row .current .calendar-day{
  text-align: center;
  color: #202535;
  background-color: #FFFFFF;
  line-height: 30px;
  font-size: 36px;
  font-family: '思源黑体 CN 500', '思源黑体 CN Regular', '思源黑体 CN';
  font-weight: 700;
  /*margin-top: 15px;*/
}
.el-calendar-table__row .prev .calendar-day,
.el-calendar-table__row .next .calendar-day
{
  text-align: center;
  /* color: #202535; */
  line-height: 30px;
  font-size: 36px;
  font-family: '思源黑体 CN 500', '思源黑体 CN Regular', '思源黑体 CN';
  font-weight: 700;
  /*margin-top: 15px;*/
}
/* .el-calendar-table__row .current,.el-calendar-table__row .prev,.el-calendar-table__row .next{
  height: 100px;
} */

.is-selected{
  font-family: '思源黑体 CN 500', '思源黑体 CN Regular', '思源黑体 CN';
  font-weight: 700;
  font-size: 24px;
  margin-top: 5px;
  text-decoration: none;
  /*color: rgb(104, 143, 235);*/
}
.is-selected-select{
  color: rgb(104, 143, 235);
}
.is-selected-warn{
  color: rgb(240,178,12);
}
.is-selected-error{
  color: rgb(255,0,0);
}
.el-calendar-table tr td:first-child {
  border-left: none;
}
.el-calendar-table tr:first-child td {
  border-top: none;
}
.el-calendar-table td {
  border-bottom: none;
  border-right: none;
  /*vertical-align: top;*/
  text-align: center;
  -webkit-transition: background-color .2s ease;
  transition: background-color .2s ease;
}
.el-calendar-table .el-calendar-day {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px 0 15px 0;
  background-color: #FFFFFF;
  height: 55px;
}
.el-calendar-table .current .el-calendar-day:hover {
  cursor: pointer;
  /*background-color: rgb(104,143,235);*/
  /*color: #fff;*/
  border-radius: 10px;
}
.el-calendar-table .prev .el-calendar-day:hover,
.el-calendar-table .next .el-calendar-day:hover {
  background-color: #fff;
}
.el-calendar-table .current .el-calendar-day:hover .calendar-day,
.el-calendar-table .current .el-calendar-day:hover .is-selected {
  /*color: #fff;*/
}

.parent{
  /*overflow:hidden;*/
}

.content {
  /*flex:1;*/
  height: calc(100% - 125px);
}
</style>
